<template>
  <div>
    <div class="header-top">
      <div class="header-wrap">
        <div>
          <!-- 
            1. 声明式导航
           -->
          尚品汇欢迎您！
          <span v-if="$store.state.user.name">
            <span>{{ $store.state.user.name }}</span>
            <button @click="logout">退出登录</button>
          </span>
          <span v-else>
            请
            <router-link to="/login">登录</router-link> |
            <router-link to="/register">免费注册</router-link>
          </span>
        </div>
        <div class="header-nav">
          <span><router-link to="/center">我的订单</router-link></span>
          <span><router-link to="/shopcart">我的购物车</router-link></span>
          <span>我的尚品汇</span>
          <span>尚品汇会员</span>
          <span>企业采购</span>
          <span>关注尚品汇</span>
          <span>合作招商</span>
          <span class="header-nav-last">商家后台</span>
        </div>
      </div>
    </div>
    <div class="header-bottom header-wrap">
      <router-link to="/home">
        <img src="./images/logo.png" alt="logo" class="header-logo" />
      </router-link>

      <!-- <form class="header-search" @submit.prevent="goSearch"> -->
      <form>
        <input type="text" class="header-search-input" v-model="keyword" />
        <!-- 
          2. 编程式导航 
          问题：点击按钮会触发表单的提交事件，导致页面刷新
          解决：阻止默认行为
        -->
        <button class="header-search-btn" @click.prevent="goSearch">
          搜索
        </button>
      </form>
    </div>
  </div>
</template>

<script>
export default {
  name: "XHeader",
  methods: {
    goSearch() {
      const keyword = this.keyword;
      const query = this.$route.query;

      const option = {
        name: "Search",
        // 携带query参数（里面可能包含分类参数）
        // 生成一个新对象
        query: {
          ...query,
        },
      };
      // 携带keyword参数
      if (keyword) {
        // 如果关键字有值，添加参数和新值
        option.query.keyword = keyword;
      } else if (option.query.keyword) {
        // 关键字没有值，并且之前的参数中有关键字
        // 删除之前关键字参数
        delete option.query.keyword;
      }
      /*
        this.$router.push --> 实际内部调用是 this.$router.history.push --> 实际内部调用是 window.history.pushState
      */
      this.$router.history.push(option);
    },
    async logout() {
      await this.$store.dispatch("user/logout");
      this.$router.push("/login");
    },
  },
  data() {
    return {
      keyword: this.$route.query.keyword,
    };
  },
  watch: {
    $route($route) {
      this.keyword = $route.query.keyword;
    },
  },
};
</script>

<style lang="less" scoped>
/*
  lang="less" 支持less
  scoped 让样式只对当前组件生效

  样式嵌套写缺点：1. 体积大 2. 解析慢
  选择器解析是有开销，最好的id，其次是class
*/

.header-top {
  background-color: #eaeaea;
  height: 30px;
  line-height: 30px;
}

.header-wrap {
  width: 1200px;
  margin: 0 auto;
  // 浮动 float 定位 position 建议少用
  display: flex;
  justify-content: space-between;
}

.header-nav span {
  padding: 0 10px;
  border-right: 1px solid #b3aeae;
}

.header-nav .header-nav-last {
  padding: 0 0 0 10px;
  border: none;
}

.header-bottom {
  height: 100px;
  align-items: center;
}

.header-logo {
  width: 175px;
  height: 56px;
}

.header-search-input {
  width: 500px;
  border: 2px solid red;
  padding: 5px;
  outline: none;
}
.header-search-btn {
  width: 80px;
  height: 30px;
  background-color: red;
  color: #fff;
  border: none;
  cursor: pointer;
}
</style>
